<template>
  <div class="container">
    <div class="perfect_box">
      <el-dialog title="新建展位" :visible.sync="isNewBooth" width="800px" :close-on-click-modal="false" :before-close="handleClose">
        <div class="binding-box">
          <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="110px" :label-position="'left'" class="info-ruleForm">
            <el-form-item label="如何称呼您" prop="imName">
              <el-input v-model="ruleForm.imName"  />
            </el-form-item>
            <!-- <el-form-item label="登录密码" prop="impassword">
              <el-input type="password" v-model="ruleForm.impassword" placeholder="请设置8-16个字母与数字组合的密码"></el-input>
            </el-form-item> -->
            <el-form-item label="展位名称" prop="imCom">
              <el-input
                v-model="ruleForm.imCom"
                placeholder="最多30个汉字，支持英文及符号"
                maxlength="30"
                show-word-limit
              />
            </el-form-item>
            <el-form-item label="展位简称" prop="imcomAbb">
              <el-input
                v-model="ruleForm.imcomAbb"
                placeholder="最多8个汉字，支持英文和符号"
                maxlength="8"
                show-word-limit
              />
            </el-form-item>
            <el-form-item label="邮箱地址" prop="imEmail">
              <el-input v-model="ruleForm.imEmail" placeholder="用于联系您" />
            </el-form-item>
            <el-form-item label="主攻行业" prop="industryVOS">
              <p class="checkbox-tip">最多选三项</p>
              <ul class="checkbox-ul">
                <el-checkbox-group
                  v-model="ruleForm.industryVOS"
                  size="small"
                  :max="3"
                >
                  <el-checkbox
                    v-for="(item, index) in imIndustryData"
                    :key="index"
                    class="check-item"
                    border
                    :label="item"
                  >
                    {{ item.iminame }}
                    <svg-icon class="tab-svg" icon-class="selected" />
                  </el-checkbox>
                </el-checkbox-group>
              </ul>
            </el-form-item>
            <el-form-item label="主营产品" prop="imMainproductsVOS">
              <ul class="checkbox-ul">
                <li v-for="(item, index) in ruleForm.imMainproductsVOS" :key="index" class="check-item-products">
                  <span>{{ item.threesortname }}</span>
                  <i class="el-icon-error" @click="delectProduct(index)" />
                </li>
                <li class="check-item-add" @click="isProductDialog = true">+新增主营商品</li>
              </ul>
            </el-form-item>
            <div v-if="authCompanyList.length > 0" class="binding-tab">
              <p class="line" />
              <span>使用当前绑定的公司进行认证</span>
              <ul>
                <li v-for="(item, index) in authCompanyList" :key="index" :class="{'active': ruleForm.qualificationId == item.id}" @click="getClickQualification(item)">
                  <span class="tab-name">{{ item.title }}</span>
                  <svg-icon v-if="ruleForm.qualificationId == item.id" class="tab-svg" icon-class="selected" />
                </li>
              </ul>
            </div>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" :loading="isBtnLoading" @click="onWorkbenchSubmit('ruleForm')">创建展位</el-button>
        </div>
      </el-dialog>
      <!-- 反绑逻辑 -->
      <el-dialog
        title="检测到您的账号暂未绑定展位"
        :visible.sync="isAntiBinding"
        width="600px"
        class="have-bg-color"
        :before-close="handleClose"
      >
        <span slot="title">
          <p>检测到您的账号暂未绑定展位</p>
          <p>若您还没有展位，请前往 <span @click="getCreatedPerfect">创建展位</span></p>
        </span>
        <div class="binding-box">
          <p v-if="isJurisdiction" class="jurisdiction-p"><i class="el-icon-warning" />账号权限不足无法绑定</p>
          <el-form ref="ruleBindForm" :model="ruleBindForm" :rules="rulesBind" :label-position="'right'" label-width="130px" class="info-ruleForm">
            <el-form-item label="绑定展位账号：" prop="username">
              <el-input v-model="ruleBindForm.username"  class="w240" placeholder="展位号是SH和6位数字的组合" clearable @blur="getServiceSurplus" />
            </el-form-item>
            <el-form-item label="绑定展位密码：" prop="password">
              <el-input v-model="ruleBindForm.password"  type="password" placeholder="请输入展位密码" class="w240" clearable />
            </el-form-item>
            <el-form-item label="绑定邮箱：" prop="email">
              <el-input v-model="ruleBindForm.email"  class="w240" placeholder="请输入要绑定的邮箱" clearable />
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" :loading="isBindLoading" @click="submitBinding('ruleBindForm')">绑定展位</el-button>
        </span>
      </el-dialog>
    </div>
    <el-dialog title="新增主营产品" :visible.sync="isProductDialog" :close-on-click-modal="false" width="650px">
      <el-tabs v-model="activeName">
        <el-tab-pane label="仪器" name="first">
          <addMainproducts :data-list="ruleForm.imMainproductsVOS" :sort-type="0" @confirmProductsList="getConfirmProductsList" />
        </el-tab-pane>
        <el-tab-pane label="耗材" name="second">
          <addMainproducts :data-list="ruleForm.imMainproductsVOS" :sort-type="3" @confirmProductsList="getConfirmProductsList" />
        </el-tab-pane>
        <el-tab-pane label="试剂" name="third">
          <addMainproducts :data-list="ruleForm.imMainproductsVOS" :sort-type="2" @confirmProductsList="getConfirmProductsList" />
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<script>
import api from '@/api'
import Cookies from 'js-cookie'
import addMainproducts from '../components/addMainproducts.vue'
import { validateEmail, validateBoothNo } from '@/utils/validate'
export default {
  name: 'PerfectInformation',
  components: { addMainproducts },
  data() {
    return {
      isBtnLoading: false,
      isAntiBinding: false, // 反绑
      isNewBooth: false,
      isBindLoading: false,
      authCompanyList: [],
      isProductDialog: false,
      activeName: 'first',
      mptype: 4, // 1:仪器 2:老耗材配件 3:试剂标物 4:新耗材配件
      ruleForm: {
        imName: '', // 联系人姓名
        // impassword: '', // 密码
        imEmail: '', // 邮箱
        imCom: '', // 公司的中文名称
        imcomAbb: '', // 公司缩写
        imMainproductsVOS: [], // 主营产品
        imMobile: Cookies.get('mobile'), // 手机号
        // imlistid: '', // 厂商信息
        industryVOS: [], // 主攻行业
        userName: Cookies.get('username'),
        qualificationId: null // 需要认证的执照Id，首次注册无需传输
      },
      rules: {
        imName: [{ required: true, message: '请填写称呼', trigger: 'blur' }],
        // impassword: [{ required: true, validator: validatePass, trigger: 'blur' }],
        imEmail: [{ required: true, validator: validateEmail, trigger: 'blur' }],
        imCom: [{ required: true, message: '请填写展位名称,最多30个汉字,支持英文及符号', trigger: 'blur' }],
        imcomAbb: [{ required: true, message: '请填写展位简称,最多8个汉字,支持英文和符号', trigger: 'blur' }],
        industryVOS: [{ type: 'array', required: true, message: '请选择主攻行业', trigger: 'change' }],
        imMainproductsVOS: [{ type: 'array', required: true, message: '请选择主营产品', trigger: 'change' }]
      },
      imIndustryData: [],
      ruleBindForm: {
        username: '', // 展位号或厂商编号
        password: '', // 密码
        email: '' // 邮箱
      },
      rulesBind: {
        username: [{ required: true, validator: validateBoothNo, trigger: 'blur' }],
        password: [{ required: true, message: '请填写展位密码', trigger: 'blur' }],
        email: [{ required: true, validator: validateEmail, trigger: 'blur' }]
      },
      isJurisdiction: false
    }
  },
  created() {
    if (this.$route.query.type === 'bind') {
      this.isAntiBinding = true
      this.isNewBooth = false
    } else {
      this.isAntiBinding = false
      this.isNewBooth = true
    }
    this.getImIndustry()
    this.getAuthCompanyList()
  },
  methods: {
    getCreatedPerfect() {
      this.isAntiBinding = false
      this.isNewBooth = true
    },
    async getImIndustry() {
      const _this = this
      const { data } = await api.login.getImIndustry()
      _this.imIndustryData = data
    },
    async getMainproductsData() {
      const _this = this
      const params = {
        mptype: _this.mptype
      }
      await api.login.getMainproductsList(params)
    },
    getConfirmProductsList(data) {
      this.ruleForm.imMainproductsVOS.push(...data)
      this.isProductDialog = false
    },
    delectProduct(i) {
      this.ruleForm.imMainproductsVOS.splice(i, 1)
    },
    // 进入工作台
    onWorkbenchSubmit(formName) {
      const _this = this
      _this.$refs[formName].validate(async(valid) => {
        if (valid) {
          _this.isBtnLoading = true
          try {
            await api.login.createNetShow(_this.ruleForm)
            _this.$router.push({ path: '/dashboard' })
            _this.isBtnLoading = false
          } catch (error) {
            _this.isBtnLoading = false
          }
        }
      })
    },
    submitBinding(formName) {
      const _this = this
      _this.$refs[formName].validate(async(valid) => {
        if (valid) {
          _this.isBindLoading = true
          try {
            await api.boss.userBindCompany(_this.ruleBindForm)
            _this.$router.push({ path: '/dashboard' })
          } catch (error) {
            _this.isBindLoading = false
          }
        }
      })
    },
    async handleClose() {
      await this.$store.dispatch('user/logout')
      this.$router.push('/login?type=sign')
    },
    async getAuthCompanyList() {
      const params = {
        username: Cookies.get('username')
      }
      const { data } = await api.login.getQualificationByUsername(params)
      this.authCompanyList = data
    },
    getClickQualification(data) {
      if (this.ruleForm.qualificationId && this.ruleForm.qualificationId == data.id) {
        this.ruleForm.qualificationId = ''
      } else if (this.ruleForm.qualificationId == 'null') {
        this.ruleForm.qualificationId = data.id
      } else {
        this.ruleForm.qualificationId = data.id
      }
    },
    async getServiceSurplus() {
      const reg = /^(sh|SH|Sh|sH)[0-9]{6}$/g
      if (this.ruleBindForm.username && reg.test(this.ruleBindForm.username)) {
        const { data } = await api.servicePermApi.surplusPermissionByAccount(this.ruleBindForm.username, 'ACCOUNT_LIMIT')
        this.isJurisdiction = data === 0
      } else {
        this.isJurisdiction = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '@/styles/index.scss';
  .container {
    width: 100%;
    height: 100vh;
    background: url(https://img1.17img.cn//ui/bimg/SH100000/yxt4/houtai/home/gzt_bg02.png) no-repeat;
    position: relative;
    .perfect_box {
      .have-bg-color {
        &::v-deep .el-dialog{
          .el-dialog__header {
            padding: 15px 16px 5px;
            background: #F5F8FC;
            p:first-child {
              color: #202933;
              font-size: 16px;
              font-weight: 500;
            }
            p:last-child {
              color: #B9C0C7;
              font-size: 12px;
              font-weight: 400;
              line-height: 2;
              span {
                color: #0C7FF2;
                cursor: pointer;
              }
            }
          }
          .el-dialog__body {
            padding: 60px 20px 40px 120px;
          }
        }
      }
      &::v-deep .el-dialog {
        .el-dialog__header {
          padding-bottom: 20px;
          border-bottom: 1px solid #E5EAF0;
          .el-dialog__title {
            font-size: 16px;
            font-weight: 500;
          }
          .el-dialog__close:before {
            content: '退出登录'
          }
        }
        .el-dialog__body {
          padding: 20px;
          .binding-tab {
            .line {
              width: 100%;
              height: 1px;
              background: #E5EAF0;
            }
            &>span {
              font-size: 14px;
              color: #7E8790;
              display: inline-block;
              line-height: 1;
              margin: 20px auto;
            }
            ul {
              li {
                width: 280px;
                height: 66px;
                display: inline-block;
                vertical-align: middle;
                margin-right: 15px;
                padding: 9px 24px;
                border: 1px solid #E5EAF0;
                border-radius: 6px;
                font-size: 16px;
                color: #232E3A;
                white-space: pre-wrap;
                cursor: pointer;
                text-align: center;
                position: relative;
                margin-bottom: 16px;
                &.active {
                  border: 1px solid #0C7FF2;
                  color: #0C7FF2;
                }
                .tab-name {
                  width: 230px;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  z-index: 9;
                  text-overflow: -o-ellipsis-lastline;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  line-clamp: 2;
                  -webkit-box-orient: vertical;
                }
                .tab-svg {
                  font-size: 20px;
                  position: absolute;
                  right: 0;
                  bottom: 0;
                  z-index: 9;
                }
              }
            }
          }
        }
        .el-dialog__footer {
          width: 100%;
          padding: 24px 0;
          text-align: center;
          border-top: 1px solid #E5EAF0;
          .el-button {
            font-size: 14px;
            line-height: 1.5;
            padding: 6px 20px;
          }
        }
        .binding-box {
          .jurisdiction-p {
            color: #E53917;
            font-size: 14px;
            text-align: center;
            font-weight: 500;
            position: absolute;
            left: 35%;
            top: 88px;
            i {
              color: #E53917;
              font-size: 14px;
              margin-right: 5px;
            }
          }
          .box-title-block {
            font-size: 16px;
            color: #202933;
            line-height: 1;
          }
          .box-title-gray {
            font-size: 14px;
            color: #7E8790;
            line-height: 1.5;
            margin: 8px auto 20px;
          }
          .box-list {
            width: 100%;
            height: 95px;
            background: #F5F8FC;
            margin-bottom: 16px;
            padding: 0 20px;
            box-sizing: border-box;
            @include flex(row, center, space-between);
            .list-name {
              font-size: 16px;
              color: #202933;
              line-height: 93px;
            }
            .list-time {
              font-size: 16px;
              color: #7E8790;
              line-height: 93px;
            }
          }
          .box-tip {
            width: 100%;
            margin: 25px auto 25px;
            padding-left: 25px;
            font-size: 14px;
            color: #B9C0C7;
            line-height: 1;
            position: relative;
            i {
              position: absolute;
              left: 0;
              font-size: 16px;
              color: #0C7FF2;
            }
          }
          .info-ruleForm {
            .el-form-item {
              margin-bottom: 24px;
              .el-form-item__content {
                .el-input {
                  width: 465px;
                }
                .checkbox-ul {
                  white-space: pre-wrap;
                  .el-checkbox.is-bordered.is-checked{
                    border-color: #0C7FF2;
                    .el-checkbox__label{
                      color: #0C7FF2;
                      font-weight: 400;
                      .tab-svg {
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        z-index: 9;
                        font-size: 16px;
                      }
                    }
                  }
                  .el-checkbox__input {
                    display: none;
                  }
                  .el-checkbox__label {
                    padding: 0;
                    color: #4F5862;
                    font-weight: 400;
                    font-size: 14px;
                    overflow: hidden;
                    width: 100%;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    line-height: 30px;
                  }
                  .check-item {
                    width: 140px;
                    height: 32px;
                    padding: 0 3px;
                    box-sizing: border-box;
                    border-radius: 4px;
                    display: inline-block;
                    vertical-align: middle;
                    text-align: center;
                    line-height: 30px;
                    margin-right: 16px;
                    margin-bottom: 16px;
                    position: relative;
                    cursor: pointer;
                    margin-left: 0;
                    .tab-svg {
                      position: absolute;
                      right: 0;
                      bottom: 0;
                      font-size: 0;
                    }
                  }
                  .check-item-add {
                    width: 140px;
                    height: 32px;
                    border-radius: 4px;
                    display: inline-block;
                    vertical-align: middle;
                    border: 1px solid #0C7FF2;
                    font-size: 14px;
                    color: #0C7FF2;
                    text-align: center;
                    line-height: 30px;
                    margin-right: 16px;
                    margin-bottom: 16px;
                    position: relative;
                    cursor: pointer;

                    &:hover {
                      opacity: .8;
                    }
                  }
                  .check-item-products {
                    width: 140px;
                    height: 32px;
                    padding: 0 3px;
                    box-sizing: border-box;
                    border: 1px solid #e5eaf0;
                    border-radius: 4px;
                    display: inline-block;
                    vertical-align: middle;
                    text-align: center;
                    line-height: 30px;
                    margin-right: 16px;
                    margin-bottom: 16px;
                    position: relative;
                    margin-left: 0;

                    span {
                      display: inline-block;
                      width: 100%;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    }

                    i {
                      font-size: 16px;
                      color: #C4C4C4;
                      position: absolute;
                      top: -8px;
                      right: -8px;
                      z-index: 9;
                      cursor: pointer;
                    }
                  }
                }
                .checkbox-tip {
                  font-size: 12px;
                  line-height: 36px;
                  color: #0C7FF2;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
